// wx://form-field
// 使自定义组件有类似于表单控件的行为。 form 组件可以识别这些自定义组件，并在 submit 事件中返回组件的字段名及其对应字段值
const nxItem = require('./nx-item');

module.exports = Behavior({
  behaviors: ['wx://form-field', nxItem],
  /**
   * 组件的属性列表
   */
  properties: {
    /** 之所以将所有信息以对象的方式传入，是为了后面的数据验证 */
    props: {
      type: Object,
      observer(props) {
        console.log();
        if (props.value === undefined) {
          props.value = ""
          // props.text = ""; // 造成传入的text被覆盖
        }
        this.setData({
          ...this.data, //默认值
          title: '选择' + props.label, //默认值
          placeholder: props.placeholder || '请选择' + props.label, //默认值
          ...props, //新值
        });
      }
    },
    columns: {
      type: Array,
      observer(c) {
        const {
          defaultIndex,
          columnsCurrent,
          value,
          columnsFromConfig
        } = this.data;
        // 来自后端配置的选项，具有优先权
        if (columnsFromConfig && columnsFromConfig.length > 0) {
          this.setData({
            columnsCurrent: [...columnsFromConfig],
          });
        } else {
          this.setData({
            columnsCurrent: [...c], //保存当前的选项
          });
        }
        
        // 只要columns改变，且当前值不在选项中，就清空之前选中的值
        // defaultIndex > -1说明有值，
        if (defaultIndex > -1 && JSON.stringify(columnsCurrent) !== JSON.stringify(c) && !c.find(i => (i.value == value && i.disabled !== true))) {
          this.setData({
            text: '',
            value: null,
          });
        }
      }
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    title: undefined,
    show: false,
    text: '',
    // 默认选中项的索引
    defaultIndex: -1,
    /** 当前的选项 */
    columnsCurrent: [],
    /** 来自后端配置的选项，具有优先权 */
    columnsFromConfig: [],
  },

  methods: {
    /** 弹出选择框 */
    showPicker() {
      this.setData({
        show: true
      });
    },

    /** 取消选择框 */
    cancel: function () {
      this.setData({
        show: false
      });
    },

    /** 确认选择器 */
    confirm: function (e) {
      const { text, value } = e.detail.value;
      const { value: valuePrev } = this.data;

      this.setData({
        show: false,
        text,
        value,
      });
      if (value !== valuePrev) {
        this.triggerEvent("change", e.detail);
      }
    },
    // 搜索关键字
    search(e) {
      const _v = e.detail;
      const {
        columns,
        columnsFromConfig
      } = this.data;

      // 来自后端配置的选项，具有优先权
      if (columnsFromConfig && columnsFromConfig.length > 0) {
        this.setData({
          columnsCurrent: columnsFromConfig.filter(i => i.text?.indexOf(_v) > -1),
        });
      } else {
        this.setData({
          columnsCurrent: columns.filter(i => i.text?.indexOf(_v) > -1),
        });
      }
    }
  },

  observers: {
    'columns,value,columnsFromConfig': function (columns, value, columnsFromConfig) {
      let col = [];
      // 来自后端配置的选项，具有优先权
      if (columnsFromConfig && columnsFromConfig.length > 0) {
        col = columnsFromConfig;
      } else {
        col = columns;
      }
      /** 当有初始value时，给text赋值 */
      if (col && col.length > 0 && value !== null && value !== undefined) {
        const idx = col.findIndex(i => i.value === value);
        if (idx > -1) {
          this.setData({
            text: col[idx].text,
            defaultIndex: idx,
          });
        }
        else {
          this.setData({
            text: '',
          });
        }
      } else {
        this.setData({
          text: '',
        });
      }
    },
  },
})